<template>
	<view class="body">
		<public-module></public-module>
		<wlk-navbar isFillHeight title="我的方案" :navbarType='3'></wlk-navbar>
		<view class="list">
			<view v-for="item in list" :key="index" class="bgw item-box br04 overHidden">
				<view class="order">
					<view class="order-head wlkflex justify-between">
						<view class="o-head-sn">创建时间：{{item.date}}</view>
						<view class="o-head-status">
							<u-button text='详细' size='mini' type="primary"
								@click="jump('/pages/customized/detail?createtime='+item.createtime)"></u-button>
						</view>
					</view>
					<view class="order-info mt30 wd100 wlkflex justify-between">
						<view>{{item.name}}</view>
						<view class="o-head-status">
							<u-button text='删除' size='mini' type="error" @click="omit(item.createtime)"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="load-more">
				<u-loadmore line :status='status' lineColor='#ccc'></u-loadmore>
			</view>
		</view>
		<customized-tabbar :active="1"></customized-tabbar>
	</view>
</template>

<script>
	import {
		toUrl
	} from '@/wlkutils/tools';
	export default {
		data() {
			return {
				list: [],
				status: 'loadmore',
				page: 1
			}
		},
		methods: {
			jump(url) {
				toUrl(url)
			},
			async getList() {
				if (this.page == 0) return
				this.status = 'loading'
				const res = await uni.$u.http.post("from/getList", {
					page: this.page
				});
				this.list = this.list.concat(res.data.list)
				this.page = res.data.nextpage
				this.status = res.data.nextpage == 0 ? 'nomore' : 'loadmore'
			},
			async omit(e) {
				const res = await uni.$u.http.post("from/delete", {
					createtime: e
				});
				if (res.code == 1) {
					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						this.list = []
						this.page = 1
						this.getList();
					}, 2000)
				}
			},
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		flex-direction: row-reverse;
	}

	.bar-title {
		font-size: $font-lt;
	}

	.tag-box {
		padding: 120rpx 0 60rpx 0;
	}

	.content-tabs {
		background-color: #FFFFFF;
		// padding-top: 20rpx;
		width: 100%;
		border-bottom: 1px solid #F3F3F3;
		// height: 49px;
	}

	.item-box {
		margin: 30rpx;

		.order {
			padding: 20rpx 30rpx 30rpx 30rpx;

			.order-head {
				font-size: $font-base;

				.o-head-sn {
					width: 80%;
				}

				.o-head-status {
					width: 20%;
					text-align: right;
					color: red;
				}
			}

			.order-info {
				.o-head-status {
					width: 20%;
					text-align: right;
					color: red;
				}

				.o-info-img {
					width: 200rpx;
					height: 200rpx;
					text-align: center
				}

				.o-info-main {
					width: 65%;

					.o-main-title {
						font-size: $font-lt;
						font-weight: bold;
					}

					.o-main-date {
						font-size: $font-sm;
						color: #666;
					}

					.o-main-user {
						font-size: $font-sm;
						color: #666;
					}
				}
			}

			.o-total-price {
				text-align: right;
				font-size: $font-base;
			}

			.o-button {
				text-align: right;
				padding: 20rpx 0 0 0;
				border-top: $-dashed-border;
			}

		}

		.insure {
			padding: 20rpx 30rpx 30rpx 30rpx;

			.insure-head {
				font-size: $font-base;

				.i-head-sn {
					width: 80%;
				}

				.i-head-status {
					width: 20%;
					text-align: right;
					color: red;
				}
			}

			.insure-info {
				font-size: $font-base;
			}

			.o-total-price {
				text-align: right;
				font-size: $font-base;
			}
		}
	}
</style>